<template>
    <div>
        <h1>显示页面</h1>
        名称 <input type="text" v-model="data.name">
        地址 <select v-model="data.addr">
            <option value="">请选择</option>
            <option :value="a.Addr" v-for="a in hhh">{{ a.Addr }}</option>
        </select>
        <button value="查询" @click="hs">查询</button>
        <table class="table table-bordered" border="1px">
            <tbody>
                <tr>
                    <td>门店名称</td>
                    <td>分店名称</td>
                    <td>商户地址</td>
                    <td>图片门店</td>
                    <td>联系电话</td>
                    <td>状态</td>
                    <td>开业日期</td>
                    <td>门店介绍</td>
                    <td>入住须知</td>
                    <td>交通信息</td>
                    <td>操作</td>
                </tr>
                <tr v-for="a in info.list">
                    <td>{{ a.StoreName }}</td>
                    <td>{{ a.StoresName }}</td>
                    <td>{{ a.Addr }}</td>
                    <td><img :src="a.Sotreimg" width="60px" height="45px"></td>
                    <td>{{ a.StorePhone }}</td>
                    <td>{{ a.State ? "启用" : "停用" }}</td>
                    <td>{{ a.Createtime.substring(0, 10) }}</td>
                    <td>{{ a.Storecontent }}</td>
                    <td>{{ a.StoreNow }}</td>
                    <td>{{ a.Storetext }}</td>
                    <td>
                        <button value="删除" @click="del(a.Sid)" class="btn btn-danger">删除</button>
                        <button value="修改" @click="upd(a.Sid)" class="btn btn-info">修改</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <span> 共 {{ info.Hnum }} 数 ， 每 页 {{ data.pagesize }} 条 ， 共 {{ data.pageindex }} / {{ info.Ynum }} 页 </span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <button value="首页" @click="getlist(1)">首页</button>&nbsp;
            <button value="上一页" @click="getlist(data.pageindex - 1)">上一页</button> &nbsp;
            <span v-for="a in info.Ynum"> {{ a }}&nbsp; </span>&nbsp;
            <button value="下一页" @click="getlist(data.pageindex + 1)">下一页</button>&nbsp;
            <button value="尾页" @click="getlist(info.Ynum)">尾页</button>&nbsp;
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router'
const router = useRouter();

let hhh: any = ref([])
onMounted(() => {
    bind();
    show();
})

const bind = () => {
    axios({
        url: 'https://localhost:7056/api/Store/BindAddr',
        method: 'get',
    })
        .then(res => {
            console.log(res.data);
            Object.assign(hhh.value, res.data);
        })
}

let data: any = ref({
    name: '',
    addr: '',
    pageindex: 1,
    pagesize: 3,
})

let info: any = reactive({
    Hnum: 0,
    Ynum: 0,
    list: []
})

const getlist = (num: any) => {
    if (num < 1) {
        data.value.pageindex = 1;
        show();
        return;
    }
    if (num > info.Ynum) {
        data.value.pageindex = info.Ynum;
        show();
        return;
    }
    data.value.pageindex = num;
    show();
}

const show = () => {
    axios({
        url: 'https://localhost:7056/api/Store/ShowStore',
        method: 'get',
        params: data.value
    })
        .then((res) => {
            console.log(res.data);
            Object.assign(info, res.data);
        })
}

const hs = () => {
    data.value.pageindex = 1;
    show();
}

const del = (id: any) => {
    axios({
        url: 'https://localhost:7056/api/Store/DeleteStore',
        method: 'delete',
        params: {
            id: id
        }
    })
        .then((res) => {
            if (res.data > 0) {
                alert('删除成功!');
                hs();
                return;
            }
            else {
                alert('删除失败!');
                return;
            }
        })
}

const upd = (id: any) => {
    router.push({
        path: '/updates',
        query: {
            id: id
        }
    });
}
</script>

<style scoped></style>